<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
</head>

<body>
    <div id="app" class="container">
        <button-counter></button-counter>
    </div>

    <div id="app1" class="container">
        <div :style="{fontSize: blogFontSize + 'em'}">
            <blog-post v-for="blog in blogList" :blog="blog" :key="blog.id" @enlarge-font="changeFontSize" @reduce-font="blogFontSize -= $event"></blog-post>
        </div>
    </div>

    <div id="app2" class="container">
        <custom-input v-model.lazy="username"></custom-input>
        <h1>{{username}}</h1>
    </div>

    <script>
        Vue.component("button-counter", {
            data: function() {
                return {
                    count: 0
                }
            },
            template: `<button class="btn btn-primary" @click="count++">你一共点击了{{count}}次</button>`
        });

        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>

    <script>
        Vue.component("blog-post", {
            props: [
                'blog'
            ],
            template: `
            <div class="row">
                <h3>{{blog.title}}</h3>
                <button class="btn btn-default" @click="$emit('enlarge-font', '3')">放大字体</button>
                <button class="btn btn-default" @click="$emit('reduce-font', '1')">缩小字体</button>
                <p>{{blog.publishtime}}</p>
            </div>
            `
        });

        var app1 = new Vue({
            el: "#app1",
            data: {
                blogFontSize: 1,
                blogList: [{
                    id: '1122525',
                    title: "一年前，习近平向这支主力军和国家队授旗并致训词",
                    publishtime: "2019-11-08"
                }, {
                    id: '1122526',
                    title: "广西南丹矿业公司坍塌事故救援工作终止 11名受困者已无生还可能",
                    publishtime: "2019-11-08"
                }, {
                    id: '1122527',
                    title: "陕西警方捣毁一淫秽直播团伙 男子为赚钱扮女性进行色情直播",
                    publishtime: "2019-11-07"
                }]
            },
            methods: {
                changeFontSize: function(size) {
                    this.blogFontSize = size
                }
            }
        });
    </script>

    <script>
        Vue.component("custom-input", {
            props: ['value'],
            template: `
                <input type="text" class="form-control" :value="value" @input="$emit('input', $event.target.value)">
            `
        });

        var app2 = new Vue({
            el: '#app2',
            data: {
                username: '长哈沙湖单位'
            },
            methods: {}
        });
    </script>
</body>

</html>